require('../css/commCss/normalize.css')
require('../css/commCss/reset.css')
require('../css/commCss/property.css')
require('../css/commCss/basic.css')

// 本身样式
require('../css/motionTrain2.less')

// 字体
require('../libs/fonts/iconfont.css')

//axios请求
const axios = require('axios')

// weui-插件库
require('weui')
const weui = require('weui.js')



// 文档加载事件
document.addEventListener('DOMContentLoaded',function(){
    
    /**
     * 0.1返回
     */
     document.querySelector('#return').addEventListener('click',function(){
        history.go(-1)
    })
    // document.querySelector('#return2').addEventListener('click',function(){
    //     history.go(-1)
    // })

    /**
     * 0.获取元素
     */

     let videoUrl = document.querySelector('#videoUrl')//视频
     let nLength = document.querySelector('#nLength')//左
     let numLength = document.querySelector('#numLength')//视频总数
     let title = document.querySelectorAll('.title')//视频名字

     let timeLeft = document.querySelector('#timeLeft')//上一个（左）
     let timeRight = document.querySelector('#timeRight')//下一个（右）
     let timeOut = document.querySelector('#timeOut')//暂停
     let imgUrl = document.querySelector('#imgUrl')//图片
     let mantle = document.querySelector('#mantle')//蒙层
     let goOn = document.querySelector('#goOn')//继续
     let finish = document.querySelector('#finish')//结束
     let progress = document.querySelector('#progress')//进度条
 
    

     /**
      * 1.获取视频信息
      */
    let fragments = JSON.parse(sessionStorage.fragments)
     console.log(fragments);

     /**
      * 2.渲染
      */
     //视频总数
     numLength.textContent = fragments.length;

     //定义一个变量
     let index = 0;


    trainDate()
    function trainDate(){
        // 视频渲染
        videoUrl.src ="http://139.9.177.51:8099" + fragments[index].videoUrl;
        // videoUrl.autoplay = true;
        videoUrl.play()
        //左视频数
        nLength.textContent = index +1;
        //视频名字
        title[0].textContent = fragments[index].title
        title[1].textContent = fragments[index].title

        imgUrl.src ="http://139.9.177.51:8099" +  fragments[index].imgUrl
    
    }
    /**
     * 3.点击左右键切换
     */
     timeLeft.addEventListener('click',function(){
        index --;
        //判断
        if(index == -1){
            index = fragments.length -1;
        }
        //调用
        trainDate()
     })
     timeRight.addEventListener('click',function(){
        index ++;
        //判断
        if(index === fragments.length){
            index = 0;
        }
        //调用
        trainDate()
    })

    /**
     * 4.进度条
     * 事件：timeupdate
     */
    videoUrl.addEventListener('timeupdate',function(){
        //更新长度 = 总长度 * 更新时间 / 总时长
        //获取总时长duration
        let totalTime = videoUrl.duration
        //获取更新时长currentTime
        let curTime = videoUrl.currentTime
        // console.log(totalTime,curTime);
        
        let curWidth = 100 * curTime / totalTime
        // console.log(curWidth)
        progress.style.width = curWidth +"%"
    })
    /**
     * 5.播放结束后自动播放下一课程
     * 事件：ended
     */
    videoUrl.addEventListener('ended',function(){
        weui.toast("3秒后自动播放下一课程")
        setTimeout(function(){
           timeRight.click()
        },3000)
    })






      //点击暂停，显示蒙层
    timeOut.addEventListener('click',function(){
        //视频暂停
        videoUrl.pause()
        mantle.classList.remove('dpnone')
        Train.classList.add('dpnone')
        //
        clearInterval(setProgress)
    })

    //点击继续，关闭蒙层
    goOn.addEventListener('click',function(){
        //视频播放
       videoUrl.play()
       mantle.classList.add('dpnone')
       Train.classList.remove('dpnone')
       trainTime()
    })

    //点击结束，保存课程训练数据，跳转页面
    finish.addEventListener('click',function(){
        //结束时间
        console.log(setTime);
        //保存课程训练数据
        let trainDate = {
            id:sessionStorage.cid,
            userId:localStorage.userId,
            takeTime:setTime,
            calorie:setTime*0.456
        }
        console.log(trainDate);

        axios.post("http://139.9.177.51:8099/sports/saveTrain",trainDate)
        .then(function(res){
            console.log(res.data);
            if(res.data.status === 0){
                weui.confirm(`您消耗了${Math.ceil(setTime*0.852)}千卡确认退出本次训练？`,function(){

                    location.href = './motionTrain.html'
                })
            }else{
                weui.alert("提交出错，请再次提交")
            }
        })
    
        // location.href = './motionTrain.html'
    })

    /**
     * 获取训练时间
     */
    let setTime = 0;
    let setProgress = null;
    trainTime()
    function trainTime(){
        setProgress = setInterval(function(){
            setTime++;
            // console.log(setTime);
        },1000)
    }








    

})